<template>
  <div class="index-body">
    <!--头部 start-->
    <canter-header></canter-header>
    <!--头部 end-->
    <div class="index-con">
      <div class="index-box">
        <h2 class="classify-title"><span class="grayColor" @click="goBack_btn">应用中心</span><em>&gt;</em>智齿客服</h2>
        <div class="empower-box">
            <h2 class="empower-title">插件安全授权登录</h2>
            <div class="empower-l">
                <div class="empower-l-box">
                    <img class="empower-l-img" src="../../assets/img/zc1.png"/>
                    <span  class="empower-l-title">智齿客服</span>
                    <span  class="empower-l-details">*智齿客服插件内含付费功能</span>
                </div>
            </div>
            <div class="empower-r">
                <div class="empower-r-box">
                  <!--申请授权显示 start-->
                  <div>
                    <div class="empower-r-top">
                        <span class="empower-r-top-f"><a>智齿客服</a>将获得以下权利：</span>
                        <span>1.智齿客服将获取您站点的基础信息</span>
                        <span>2.智齿客服将获取您的手机号码</span>
                    </div>
                    <div class="empower-r-bottom">
                       <span class="empower-r-bottom-title">输入授权所需的手机号码：</span>
                       <el-input class="phoneNumber" v-model="phoneNumber" @blur="phoneNumberBlur_btn" placeholder="请输入授权通知的手机号码"></el-input>
                       <i class="redErrorTip" v-show="emptyPhoneNumber">请输入手机号</i>
                       <i class="redErrorTip" v-show="phoneNumberError">手机号格式错误</i>
                       <div class="phoneCode-div">
                          <el-input class="phoneCode" v-model="phoneCode"  @blur="phoneCodeBlur_btn" placeholder="请输入验证码"></el-input>
                          <span class="getCode" @click="getValidateCode_btn" :class="{gray:grayShow}">{{codeText}}</span>
                          <i class="redErrorTip" v-show="validateCode">验证码不能为空</i>
                       </div>
                    </div>
                    <span class="sure" @click="applyEmpower_btn" :class="{gray:applyGray}">确认授权</span>
                  </div>
                  <!--申请授权显示 end-->
                </div>
            </div>
        </div>
      </div>
    </div>
    <div class="index-footer">
      <p>云商-移动供应链电商平台</p>
    </div>
  </div>
</template>
<script>
  import canterHeader from '../../components/header/canterHeader'
  export default{
    components:{
      canterHeader,
    },
    data(){
      return{
        emptyPhoneNumber:false,  //手机号为空时显示
        phoneNumberError:false,   //手机号错误时显示
        validateCode:false,   //验证码为空时显示
        phoneNumber:"",    //手机号码
        phoneCode:"",    //验证码
        codeText:"获取验证码",    //获取验证码按钮默认显示文本
        vue_phone_countDown:null,  //定时器
        grayShow:false,    //获取验证码按钮置灰
        grayShowBtn:true,    //获取验证码按钮可操作
        applyGray:false,   //申请按钮置灰
        applyGrayBtn:true,
      }
    },

    methods:{
      //申请授权
      applyEmpower_btn(){
        if(this.phoneNumber == ""){
          this.emptyPhoneNumber = true;
          return false
        }else if(!/^(13[0-9]|14[57]|15[012356789]|17[67]|18[012356789])\d{8}$/.test(this.phoneNumber)){
          this.emptyPhoneNumber = false;
          this.phoneNumberError = true;
          return false
        }else if(this.phoneCode == "") {
          this.validateCode = true;
          this.emptyPhoneNumber = false;
          this.phoneNumberError = false;
        }else{
          this.validateCode = false;
          this.emptyPhoneNumber = false;
          this.phoneNumberError = false;
          if(this.applyGrayBtn){
            this.applyGray = true;
            this.applyGrayBtn = false;
            this.axios({
              method:"POST",
              url:"/v3/zhichi/"+this.phoneNumber+"/"+this.phoneCode+"/register",
              data:{},
            }).then((res) =>{
              this.applyGray = false;
              this.applyGrayBtn = true;
              this.getLoginUrl();
            }).catch((err) =>{
              this.applyGrayBtn = true;
              this.applyGray = false;
              this.Public.openError(this,err.response.data)
            });
          }

        }
      },
			//获取地方登陆url
      getLoginUrl(){
        this.axios({
          method:"GET",
          url:"/v3/zhichi/getLoginUrl",
          data:{},
        }).then((res) =>{
          this.$router.push({path:"/zcService"});
          window.open(res.data.url);
        }).catch((err) =>{
          this.Public.openError(this,err.response.data)
        });
      },
       //获取验证码
      getValidateCode_btn(){
        if(this.phoneNumber == ""){
          this.emptyPhoneNumber = true;
          return false
        }else if(!/^(13[0-9]|14[57]|15[012356789]|17[67]|18[012356789])\d{8}$/.test(this.phoneNumber)){
          this.emptyPhoneNumber = false;
          this.phoneNumberError = true;
          return false
        }else{
          this.emptyPhoneNumber = false;
          this.phoneNumberError = false;
          if(this.grayShowBtn){
            this.axios({
              method:"PATCH",
              url:"/v3/notify/smsHistorys/"+this.phoneNumber+"/DXYZ0002/sendValidateCode",
              data:{},
            }).then((res) =>{
              this.grayShow = true;
              this.grayShowBtn = false;
              let num = 60;
              this.vue_phone_countDown = setInterval(()=>{
                this.codeText = num+"s后重新获取";
                num--;
                if(num<=-1){
                  this.grayShow = false;
                  this.grayShowBtn = true;
                  clearInterval(this.vue_phone_countDown);
                  this.codeText = "重新获取";
                }
              },1000)
            }).catch((err) =>{
              this.grayShow = false;
              this.grayShowBtn = true;
              this.Public.openError(this,err.response.data)
            });
          }
        }
      },

      //输入验证码框失去焦点
      phoneCodeBlur_btn(){
        if(this.phoneNumber == ""){
          this.validateCode = true;
          return false
        }else{
          this.validateCode = false;
        }
      },

      //输入手机号框失去焦点
      phoneNumberBlur_btn(){
        if(this.phoneNumber == ""){
          this.emptyPhoneNumber = true;
          return false
        }else if(!/^(13[0-9]|14[57]|15[012356789]|17[67]|18[012356789])\d{8}$/.test(this.phoneNumber)){
          this.emptyPhoneNumber = false;
          this.phoneNumberError = true;
          return false
        }else{
          this.emptyPhoneNumber = false;
          this.phoneNumberError = false;
        }
      },

      //点击返回应用中心
      goBack_btn(){
        this.$router.push({path:"/centerIndex"})
      },

    },
    created(){
      this.axios({
				method: 'GET',
				url: "/v3/member/operators"
			}).then((res) => {
				this.phoneNumber = res.data.operatorPhone;
			})
    },

  }
</script>
<style scoped>

  .gray{
    background: #eeeeee!important;
  }

 /*已授权的样式  start*/
  .ready em{
    font-size: 100px!important;
    color: #008000;
  }

  .ready{
    overflow: hidden;
    margin-top: 5px;
    padding-left: 50px;
  }

  .readyTitle{
    display: block;
    color: #008000;
    font-size: 16px;
  }
/*已授权的样式  end*/

 .redErrorTip{
   color: red;
   margin-left: 10px;
 }

  .sure{
    display: block;
    width: 60%;
    text-align: center;
    height: 36px;
    line-height: 36px;
    background: rgb(19, 193, 159);
    color: white;
    border-radius: 4px;
    cursor: pointer;
  }

  .sure:hover{
    opacity: 0.8;
  }

  .getCode{
    float: left;
    display: block;
    width: 21%;
    margin-left: 1%;
    text-align: center;
    height: 36px;
    line-height: 36px;
    background: rgb(19, 193, 159);
    color: white;
    border-radius: 4px;
    cursor: pointer;
  }

 .getCode:hover{
   opacity: 0.8;
 }

  .phoneCode{
    width: 38%;
    float: left;
  }

  .phoneCode-div{
    height: 36px;
    margin-bottom: 20px;
    line-height: 36px;
  }

  .phoneNumber{
    width: 60%;
    margin-bottom: 10px;
  }

  .empower-r-bottom-title{
    line-height: 20px;
    display: block;
    margin-bottom: 6px;
  }

  .empower-r-bottom{
    overflow: hidden;
  }

  .empower-r-top-f{
    font-size: 13px!important;
  }

  .empower-r-top-f a{
    color: #3c9bf5;
    cursor: pointer;
  }

  .empower-r-top-f a:hover{
    opacity: 0.8;
  }

  .empower-r-top span{
    display: block;
    line-height: 20px;
    font-size: 12px;
  }

  .empower-r-top{
    overflow: hidden;
    margin-bottom: 30px;
  }

  .empower-r{
    float: left;
    width: 60%;
    overflow: hidden;
    padding: 55.5px 0 0 0px;
  }

  .empower-l-details{
    display: block;
    text-align: center;
    color: #999999;
  }

  .empower-l-title{
    display: block;
    text-align: center;
    font-size: 16px;
    margin: 10px 0;
  }

  .empower-l-img{
    width: 80px;
    height: 80px;
    margin: 0 auto;
  }

  .empower-l-box{
     width: 50%;
     margin:  0 auto;
  }

  .empower-r-box{
    width: 70%;
    margin:  0 auto;
    padding-left: 20%;
  }

  .empower-l{
    float: left;
    width: 40%;
    padding-top: 114px;
  }

  .empower-title{
    height: 74px;
    line-height: 74px;
    border-bottom: 1px #dddddd solid;
    font-size: 18px;
    font-weight: normal;
  }

  .empower-box{
    width: 96%;
    padding: 0 2%;
    height: 440px;
    border: 1px #dddddd solid;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    margin-top: 30px;
    background: white;
  }

  .index-footer{
    height: 80px;
    line-height: 80px;
  }

  .index-footer p{
    text-align: center;
  }

  .classify-title{
    height: 60px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: normal;
    line-height: 60px;
    border-bottom: 1px solid #ddd;
    color: #555555;
  }

  .classify-title em{
    font-size: 12px;
    margin: 0 4px;
    color: #999999;
  }

  .grayColor{
    color: #999999;
    cursor: pointer;
  }

  .gray:hover{
    color: #888888;
  }

  .index-box{
    width: 1000px;
    padding: 0 10px;
    margin: 0 auto;
    overflow: hidden;
  }

  .index-con{
    overflow: hidden;
    width: 100%;
  }

  .index-body{
    padding-top: 80px;
    background: #f5f5f5;
    overflow: hidden;
  }

</style>
